<template>
  <div>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>搅拌工具图纸存档</span>
      </div>
      <el-table size="mini" stripe="true" :data="toolDrawingArray">
        <el-table-column label="序号" type="index" width="70">
          <el-input size="mini"></el-input>
        </el-table-column>
        <el-table-column width="50px">
          <template slot-scope="scope">
            <el-upload class="upload-demo"
                       :action="uploadAction"
                       :file-list="fileListDrawing" :multiple="false" :show-file-list="false"
                       :on-success="(response, file, fileList) => handleUploadDrawing(response, file, fileList, scope.$index)">
              <el-button size="small" type="text">选择</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column label="产品图纸">
          <el-input size="mini" v-model="toolDrawingArray.drawing"></el-input>
        </el-table-column>
        <el-table-column label="毛坯图">
          <el-input size="mini" v-model="toolDrawingArray.semifinishedDrawing"></el-input>
        </el-table-column>
        <el-table-column label="加工程序">
          <el-input size="mini" v-model="toolDrawingArray.progress"></el-input>
        </el-table-column>
        <el-table-column
            width="150" align="left">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-plus" @click="addRow"></el-button>
            <el-button type="text" size="mini" icon="el-icon-minus" v-if="toolDrawingArray.length > 1"
                       @click="deleteRow(scope.$index)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" size="mini" @click="addItem">增 加</el-button>
      <el-button type="info" size="mini" v-if="toolDrawingArray.length > 1"
                 @click="clearItem">清 空</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ToolDrawingData",
  data() {
    return {
      uploadAction: `${process.env.VUE_APP_API_BASE_URL}/file/upload`,
      fileListDrawing:'',
      fileListSemifinishedDrawing:'',
      fileListProgress:'',
      toolDrawingArray: [{
        drawing:[],
        semifinishedDrawing:[],
        progress:[]
      }]
    }
  },
  methods:{
    addRow() {
      this.toolDrawingArray.push({
        drawing:'',
        semifinishedDrawing:'',
        progress:''
      })
    },
    deleteRow(index) {
      if (this.toolDrawingArray.length > 1) {
        this.toolDrawingArray.splice(index, 1)
      }
    },
    addItem(){},
    clearItem(){},
    handleUploadDrawing(response, file, fileList, rowIndex) {
      console.log(response)
      const filePath = response.data
      this.toolDrawingArray[rowIndex].drawing.push(
          {
            filePath: filePath
          }
      )
      let fileName = filePath.substring(filePath.lastIndexOf('/') + 1)
      fileName = fileName.substring(0, fileName.lastIndexOf('.'))
      this.toolDrawingArray[rowIndex].drawing[rowIndex] = fileName;
    },
  }
}
</script>

<style scoped>

</style>